import react from "@vitejs/plugin-react-swc";
import { resolve } from "path";
import Unocss from "unocss/vite";
import { defineConfig, splitVendorChunkPlugin } from "vite";
import { visualizer } from "rollup-plugin-visualizer";
import viteCompression from "vite-plugin-compression";
import svgr from "vite-plugin-svgr";
import dts from 'vite-plugin-dts'


// https://vitejs.dev/config/
export default defineConfig({
  base: "/one-codes/",
  build: {
    // lib: {
    //   entry: resolve(__dirname, "./src/App.tsx"),
    //   name: "OneCodes",
    //   // the proper extensions will be added
    //   fileName: "one-codes",
    // },
    sourcemap: false,
    rollupOptions: {
      // external: ["react", "react-dom"],
      // output: {
      //   // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
      //   globals: {
      //     react: 'React',
      //     'react-dom':"ReactDom"
      //   },
      // },
      //   output: {
      //     manualChunks: {
      //       "antd": ['antd'],
      //       "ahooks": ['ahooks'],
      //       "react": ['react'],
      //       "codemirror": ["@uiw/react-codemirror", "@uiw/codemirror-theme-vscode", "@codemirror/lang-javascript"]
      //     }
      //   }
    },
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },
  resolve: {
    alias: [
      {
        find: /^~/,
        replacement: "",
      },
      {
        find: "@",
        replacement: resolve(__dirname, "./src"),
      },
    ],
  },
  plugins: [
    dts(),
    splitVendorChunkPlugin(),
    viteCompression(),
    visualizer(),
    Unocss({
      shortcuts: {
        btn: "text-20px cursor-pointer transition-all	active:bg-#d0d0d0  hover:bg-#e6e6e6 rounded-5px p-5px text-center",
        widgetBtn:
          "bg-brand-primary text-#fff text-20px cursor-pointer transition-all	active:bg-#d0d0d0  hover:bg-#e6e6e6 rounded-5px p-5px text-center",
        "btn-block":
          "block py-1	 px-3	font-semibold rounded-md bg-brand-primary text-white cursor-pointer hover:bg-brand-hover text-center",
        "f-center": "flex justify-center items-center",
      },
      rules: [
        [
          "editor-hover",
          {
            outline: "1.5px dotted #2558fb",
            "outline-offset": "1px",
          },
        ],
      ],
      theme: {
        colors: {
          brand: {
            radius: "4px",
            primary: "#2558fb",
            hover: "#507ff7",
            grey: "#f5f5f5",
            line: "#e1e2e8",
            txt: "#1e2128",
            subTxt: "#505968",
          },
        },
      },
    }),
    react(),
    svgr(),
  ],
});
